<template>
  <div class="approve-detail-box">
    <div class="sub-title">
      <div class="sub-before-line"></div>
      <span style="margin-left: 10px">学习内容</span>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" :readOnly="true"/>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <editor ref="editor" v-model="form.content" :min-height="180" :readOnly="true"/>
      </el-form-item>
      <el-form-item label="类别" prop="categoryId">
        <el-cascader
          v-model="form.categoryId"
          :options="leaningCategoryList"
          :props="props"
          :disabled="true"
          @change="changeCategory">
        </el-cascader>
      </el-form-item>
      <el-form-item label="附件" prop="attachment">
        <file-upload v-model="form.attachment" :isShowTip="false" :class="form.id ? 'hide-upload-input' : ''"/>
      </el-form-item>
      <el-form-item label="受众范围" prop="receiveList">
        <org-users  :pickArray="form.receiveList"  :hide-tabs="hideTabs" :maxLevel="3" :isDisabled="disabled"></org-users>
      </el-form-item>
    </el-form>
    <approve-form ref="approveFormRef" v-if="form.status == 0"></approve-form>
    <div class="approve-histroy-list" v-if="form.reviewList && form.reviewList.length">
      <div class="sub-title">
        <div class="sub-before-line"></div>
        <span style="margin-left: 10px">审核记录</span>
      </div>
      <div class="table-box">
        <el-table :data="form.reviewList" style="width: 85%;margin-left: 100px">
          <el-table-column label="操作人" align="center" prop="reviewerName"></el-table-column>
          <el-table-column label="操作结果" align="center" prop="result">
            <template slot-scope="scope">
               {{scope.row.result == 1 ?  '通过' : scope.row.result == 2 ? '驳回' : '提交'}}
            </template>
          </el-table-column>
          <el-table-column label="审核意见" align="center" prop="reason" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作时间" align="center" prop="reviewTime"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" @click="submitForm" v-if="form.status == 0" >确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
    import OrgUsers from "../../../components/OrgUsers/index"
    import  {common} from "./common.js"
    import approveForm from "@/views/examine/approveForm";
    import apprRecords from "@/views/examine/apprRecords";
    import {getLeaningContentReview,updateLeaningContentReview } from "@/api/examine/leaningContentReview";

    export default {
        name: "approveDetail",
        components: {
          OrgUsers,
          approveForm,
          apprRecords
        },
        mixins:[common],
        data(){
          return {
            disabled:true,
            // 表单参数
            form: {
              title: '',
              content: '',
              categoryId: null,
              attachment:'',
              receiveList:[]
            },
            // 表单校验
            rules: {
              result: [
                { required: true, message: "审核状态不能为空", trigger: "change" }
              ]
            },
            hideTabs: ['tag'],
          }
        },
        methods:{
          // 取消按钮
          cancel() {
            this.$router.push({path: "/leaning/approveList"});
          },
          // 表单重置
          reset() {
            this.form = {
              id: null,
              title: '',
              content: '',
              categoryId: null,
              attachment:'',
              receiveList:[],
              result: null,
              reviewer: null,
              reviewTime: null
            };
            this.resetForm("form");
          },
          /** 提交按钮 */
          submitForm() {
            let self = this
            self.$refs["form"].validate(valid => {
              if (valid) {
                self.$refs.approveFormRef.getApproveForm().then(resp => {
                  var subForm = {}
                  subForm.id = this.form.id
                  if(resp.apprStatusTemp == '1'){ //通过
                    subForm.status = 1
                  }else if(resp.apprStatusTemp == '-1'){ //驳回
                    subForm.status = 2
                    subForm.reason = resp.rejectReason
                  }
                  if (self.form.id != null) {
                    updateLeaningContentReview(subForm).then(response => {
                      this.$modal.msgSuccess("修改成功");
                      this.cancel()
                    });
                  }
                })
              }
            });
          },
          getDetail(id){
            getLeaningContentReview(id).then(response => {
              if(response.code == 200){
                let data = response.data
                this.form = {
                  id:data.id,
                  title: data.title,
                  content: data.content,
                  categoryId: data.categoryId,
                  receiveList: data.receiveListJson ? JSON.parse(data.receiveListJson) : [],
                  status: data.status,
                  attachment: data.attachment,
                  reviewList: data.reviewList ? data.reviewList: []
                }
                if(this.form.status == 0){

                }
              }
            });
          }
        },
        created() {
          this.$nextTick(()=>{
            this.$refs.editor.hideToolbar();
          })
          if(this.$route.query.id){
            this.reset()
            this.getDetail(this.$route.query.id)
          }
        }
    }
</script>

<style scoped lang="scss">
  .approve-detail-box{
    padding: 30px 0;
    width: 80%;
    margin-left: 9%;
    .sub-title{
      display: flex;
      flex-flow: row nowrap;
      padding-bottom:20px;
      .sub-before-line{
        border:1px;
        background-color: #4e8dff;
        width: 6px;
        height: 20px;
      }
    }
    ::v-deep .approve-title{
      margin-left: 0 !important;
      padding-bottom: 10px;
    }
    ::v-deep .editor{
      min-height: 240px !important;
    }
    .footer{
      text-align: center;
      margin-top: 40px;
      .cancel-btn{
        margin-left: 40px;
      }
    }
    ::v-deep .app-container{
      padding: 0 !important;
      .el-form{
        margin-left: 0 !important;
      }
    }
    ::v-deep .hide-upload-input .upload-file-uploader{
      display: none !important;
    }
    ::v-deep .el-link--inner{
      color: rgb(64, 158, 255);;
    }
    ::v-deep .el-upload-list__item{
      padding: 0 10px;
    }
  }
</style>
